<template>
  <div class="body-404" >
    <div class="_404">
      <h1 class="m-0">
        抱歉，页面未找到，<span>{{ countDown }}</span>
        s后自动跳转到
        <a href="javascript:;" @click="goHome">首页</a>
      </h1>
    </div>
    <!-- 加载图片的 -->
  </div>
</template>
<script>
export default {
  name: '404',
  components: {},
  data() {
    return {
      countDown: 5,
      timer: null,
    }
  },
  methods: {
    goHome() {
      this.$router.push('/app')
      clearInterval(this.timer)
    },
  },
  created() {
    this.timer = setInterval(() => {
      this.countDown > 0 ? this.countDown-- : this.goHome()
    }, 1000)
  },
}
</script>
<style scoped lang="less">
.body-404 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: skyblue;
  font-family: Arial, Helvetica, sans-serif;
  background: url(../assets/404.gif) no-repeat;
  background-size: cover;
  background-position: center;
  img {
    width: 100%;
    height: 100%;
    float: left;
  }
  ._404 {
    margin-top: 45vh;
    margin-left: 55vw;
    a:hover {
      color: skyblue;
    }
  }
}
</style>
